<template>
  <div class="addevaluate">
    <van-nav-bar class="page-nav-bar navbar" title="留下您的评价">
      <van-icon
        slot="left"
        name="arrow-left"
        color="#000"
        size="22"
        @click="$router.back()"
      ></van-icon>
    </van-nav-bar>
    <div class="spxinxi">
      <div class="img">
        <van-image :src="list[0].shop.photo" />
      </div>
      <h3 class="spname">{{ list[0].shop.title }}</h3>
      <span class="miaoshu">{{ list[0].shop.content }}</span>
      <Star @star="star"></Star>
      <button
        class="btns"
        type="default"
        @click="px(i)"
        ref="refx"
        v-for="(v, i) in btns"
        :key="i"
      >
        {{ v }}
      </button>
      <!-- <van-button type="default" @click="px">尺码合适</van-button> -->
      <!-- <van-button type="default" @click="px">尺码偏大</van-button> -->
    </div>
    <van-field
      v-model="message"
      rows="2"
      autosize
      type="textarea"
      maxlength="150"
      placeholder="在这里写下您的评论"
      show-word-limit
    />
    <van-button
      class="tijiao"
      type="default"
      size="large"
      color="#000"
      @click="addCommentList"
      >提交</van-button
    >
  </div>
</template>

<script>
import { getBuyListById, addCommentList, delBuyListById } from "@/api/My";
import Star from "./star.vue";
export default {
  components: {
    Star,
  },
  data() {
    return {
      message: "",
      btns: ["体验较差", "体验适中", "体验极好"],
      uid: this.$route.params.id,
      list: {},
      stars: null,
      datas: {},
    };
  },
  created() {
    if (this.datas.id) {
      this.delBuyListById();
    } else {
      console.log("操作失败");
    }
    this.delBuyListById();
    this.star();
    this.getBuyListById();
  },
  updated() {},
  methods: {
    px(i) {
      this.$refs.refx[0].className = "";
      this.$refs.refx[1].className = "";
      this.$refs.refx[2].className = "";
      this.$refs.refx[i].className = "red";
    },
    async getBuyListById() {
      const { data } = await getBuyListById({
        userId: this.$store.state.user.UserInfo.id,
      });
      // console.log(data.id,this.uid);
      this.list = data;
      this.list = this.list.filter((v) => {
        return v.id == this.uid;
      });
    },
    star(v) {
      this.stars = v;
    },

    // async delBuyListById() {
    //   const res = await delBuyListById({
    //     id: commentId,
    //   });
    //   console.log(res);
    // },
    async addCommentList() {
      var num = Math.ceil(this.stars - 0);
      try {
        const { data } = await addCommentList({
          content: this.message,
          photo: this.list[0].shop.photo,
          appraise: num,
          userId: this.$store.state.user.UserInfo.id,
          shopId: this.list[0].shop.id,
        });
        console.log(data);
        this.datas = data;
        this.$router.push({
          name: "evaluate",
          params: {
            datas: this.datas,
            list: this.list,
          },
        });
        this.delBuyListById()
      } catch (error) {
        this.$toast.fail("操作失败，请重试");
      }
    },
    async delBuyListById() {
      try {
        if (this.datas.id) {
          const res = await delBuyListById({
            id: this.list[0].id,
          });
          this.getBuyListById();
          console.log(res);
        }
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style scoped lang='less'>
.addevaluate {
  padding-bottom: 70px;
}
.spxinxi {
  text-align: center;
  padding-top: 30px;
  h1 {
    margin: 10px 0;
  }
  p {
    margin: 5px 0;
    font-size: 30px;
    color: #ccc;
  }
}
.tijiao {
  position: fixed;
  bottom: 0;
  left: 0;
  margin-top: 90px;
}
.van-field__control {
  padding: 0 20px;
}
.van-field {
  padding: 10px 30px;
}
.spname {
  font-size: 22px;
  margin: 5px 0;
}
.miaoshu {
  font-size: 18px;
}
.red {
  background-color: #666;
}
// .btns {
//   border: none;
// }
// .btns:active {
//   border: none;
// }
.van-image {
  height: 75%;
  width: 80%;
}
</style>
